

<template>
   <div id="homePage">
<!--     显示搜索-->
     <div class="search-bar">
       <a-input-search
         v-model:value="seachrParams.searchText"
         placeholder="从海量图片中搜索"
         enter-button="搜索"
         size="large"
         @search="doSearch"
       />
     </div>
     <!-- 分类和标签筛选 -->
     <a-tabs v-model:active-key="selectedCategory" @change="doSearch">
       <a-tab-pane key="all" tab="全部" />
       <a-tab-pane v-for="category in categoryList" :tab="category" :key="category" />
     </a-tabs>
     <div class="tag-bar">
       <span style="margin-right: 8px">标签：</span>
       <a-space :size="[0, 8]" wrap>
         <a-checkable-tag
           v-for="(tag, index) in tagList"
           :key="tag"
           v-model:checked="selectedTagList[index]"
           @change="doSearch"
         >
           {{ tag }}
         </a-checkable-tag>
       </a-space>
     </div>
<!--     显示列表-->
     <picture-list  :dataList="dataList" :loading="loading" :enableAnimation="isFirstLoad" ></picture-list>
<!--     分页展示-->
     <a-pagination
       style="text-align: right"
       v-model:current="seachrParams.current"
       v-model:pageSize="seachrParams.pageSize"
       @change="onPageChange"

       :total="total" />
   </div>
</template>

<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { listPictureTagCategoryUsingGet, listPictureVoByPageUsingPost } from '@/api/pictureController.ts'
import PictureList from '@/components/PictureList.vue'

// 定义数据 ref 可以接受原始类型（如布尔值、字符串、数字）或对象作为参数
// ，而 reactive 只能接受对象。对于对象，两者都可以使用，但 ref 会通过 .value 属性访问内容，而 reactive 则可以直接访问。
const  dataList = ref<API.PictureVO[]>([])
const  total = ref(0)
const loading = ref(true)
// 是否是首次加载，用于控制动画
const isFirstLoad = ref(true)



// 搜索条件
const seachrParams = reactive<API.PictureQueryRequest>({
  current: 1,
  pageSize: 12,

  name: '',
})


// 分页参数  computed 计算函数  seachrParams 改变的时候可以跟着动态改变
const  onPageChange = async (page: number,pageSize: number) => {
  seachrParams.current = page
  seachrParams.pageSize = pageSize
  fetchData(true) // 翻页时跳过动画
}
// 选中的分类
const  selectedCategory = ref<string>('all')
// 分类列表
const  categoryList = ref<string[]>([])
// 标签列表
const  tagList = ref<string[]>([])
// 选中的标签列表
const  selectedTagList = ref<boolean[]>([])

/**
 * 获取下拉列表的数据
 */
const  getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data ) {
    tagList.value = res.data.data.tagList ?? []
    categoryList.value = res.data.data.categoryList ?? []
  }

}
onMounted(()=>{
  getTagCategoryOptions()
})

// 获取数据   ...seachrParams 数据展开
const fetchData = async (skipAnimation = false) => {
  const params = {
    ...seachrParams,
    tags: [] as string[],
  }
  // 选中的分类
  if (selectedCategory.value !== 'all') {
    params.category = selectedCategory.value
  }
  selectedTagList.value.forEach((useTag,index) => {
    console.log(useTag);
    console.log(index);
    console.log(tagList);
    if (useTag){
      params.tags.push(tagList.value[index])
    }
  })
  const res = await listPictureVoByPageUsingPost(params)
  if (res.data.code == 0 && res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
    // 首次加载后，将 isFirstLoad 设置为 false，后续搜索和翻页不再显示动画
    if (isFirstLoad.value && !skipAnimation) {
      // 首次加载完成，延迟一下再关闭动画标志，确保动画能播放完成
      setTimeout(() => {
        isFirstLoad.value = false
      }, 1000)
    } else if (skipAnimation) {
      // 搜索或翻页时，直接关闭动画标志
      isFirstLoad.value = false
    }
  } else {
    message.error('获取数据失败' + res.data.message)
  }
  loading.value = false
}
const  doSearch = () => {
  seachrParams.current = 1
  fetchData(true) // 搜索时跳过动画
}

// 页面加载时候调用数据
onMounted(() => {
  fetchData(false) // 首次加载显示动画
})

</script>

<style scoped>
#homePage {
  margin-bottom: 16px;
}

#homePage .search-bar {
  max-width: 480px;
  margin: 0 auto 16px;
}

#homePage .tag-bar {
  margin-bottom: 16px;
}

</style>
